<template>
  <div>
     <h3>我是父组件</h3>
      <SonComponent 
      v-for="item in message" :key="item.id" 
      :id="item.id" 
      :uname="item.uname" 
      :famliyName="item.famliyName" 
      :age="item.age" 
      :profess="item.profess"
      @mm='nn'
      ></SonComponent>
   </div>
</template>
 
<script>
import SonComponent from './SonComponent'

export default {
  name: "FatherComponent",
  components: {
    SonComponent,
  },
  props: {},
  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端'
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试'
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈'
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    nn(id){
      // console.log(id);
      this.message.forEach(item => item.id === id && (item.age+=1))
    }
  }
};
</script>

<style scoped>
     
</style>